<template>

	<div class="innerpage headspace">
		<Header active="1"></Header>
		<div class="bread">
			<div class="page-inner">
			    <NuxtLink to="/">Home</NuxtLink>><NuxtLink to="/Manufacturers">Database</NuxtLink>><NuxtLink to="/APIs">Active Pharmaceutical
			        Ingredient (API)</NuxtLink>><NuxtLink  :to="'/APIs/'+ApiInfo.id" style="cursor: pointer">{{ApiInfo.ingredient}}</NuxtLink>><span>Toxicity Data</span>
			</div>
			
		</div>
		<div class="detailBox" id="p1">
			<div class="box flex page-inner">
				<div class="col offset">
					<div class="mliks">
						<div class="mt f24 font-m">Hazard Identified</div>
						<div class="items">
							<div class="i"><a href="#p1" title="Single Dose Toxicity">Single Dose Toxicity</a></div>
							<div class="i"><a href="#p2" title="Repeated Dose Toxicity">Repeated Dose Toxicity</a></div>
							<div class="i"><a href="#p3" title="Carcinogenicity">Carcinogenicity</a></div>
							<div class="i"><a href="#p4" title="Genotoxicity">Genotoxicity</a></div>
							<div class="i"><a href="#p5" title="Reproductive and Developmental Toxicity">Reproductive and Developmental Toxicity</a></div>
							<div class="i"><a href="#p6" title="Local lrritation and Sensitization Potential">Local lrritation and Sensitization Potential </a></div>
						</div>
						<template v-if="false">
							<div class="mt f24 font-m">Clinical Toxicity Data</div>
							<div class="items">
								<!-- <div class="i"><a href="#p7">Pharmacodynamics data</a></div> -->
								<div class="i"><a href="#p8" title="Carcinogenicity">Carcinogenicity </a></div>
								<div class="i"><a href="#p9" title="Reproductive and Developmental Toxicity">Reproductive and Developmental Toxicity </a></div>
								<div class="i"><a href="#p10" title="Local lrritation and Sensitization Potential">Local lrritation and Sensitization Potential </a></div>
								<div class="i"><a href="#p11" title="Genotoxicity">Genotoxicity</a></div>
							</div>
						</template>
					</div>
				</div>
				<div class="cor">
					<div class="dt f24 font-m">Hazard Identified</div>
					<div class="dblock">
						<div id="p1" class="pos"></div>
						<div class="bt f24 font-m">Single Dose Toxicity</div>
						<div class="btxt f16">
							<table>
								<tbody>
									<tr>
										<th class="f18 font-m">Species</th>
										<th class="f18 font-m">Route</th>
										<th class="f18 font-m">LD50 value (mg/kg)</th>
									</tr>
									<tr v-for="(item,index) in dataInfo.acute_toxicity_studies" :key="index">
										<td>{{item.species||'Not available'}}</td>
										<td>{{item.route||'Not available'}}</td>
										<td>{{item.ld50_value||'Not available'}}</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
					<div class="dblock">
						<div id="p2" class="pos"></div>
						<div class="bt f24 font-m">Repeated Dose Toxicity</div>
						<div class="btxt f16">
							<table>
								<tbody>
									<tr>
										<th class="f18 font-m">Species</th>
										<th class="f18 font-m">Route</th>
										<th class="f18 font-m">Doses </th>
										<th class="f18 font-m">Duration </th>
										<th class="f18 font-m">Key Findings</th>
									</tr>
									<tr v-for="(item,index) in dataInfo.repeated_dose_toxicity_studies" :key="index">
										<td>{{item.species||'Not available'}}</td>
										<td>{{item.route||'Not available'}}</td>
										<td>{{item.doses||'Not available'}}</td>
										<td>{{item.duratioin||'Not available'}}</td>
										<td>{{item.key_findings||'Not available'}}</td>
									</tr>
									
								</tbody>
							</table>
						</div>
					</div>
					<div class="dblock">
						<div id="p3" class="pos"></div>
						<div class="bt f24 font-m">Carcinogenicity</div>
						<div class="btxt f16">
							<table>
								<tbody>
									<tr>
										<th class="f18 font-m">Species</th>
										<th class="f18 font-m">Route</th>
										<th class="f18 font-m">Doses </th>
										<th class="f18 font-m">Duration </th>
										<th class="f18 font-m">Key Findings</th>
									</tr>
									<tr v-for="(item,index) in dataInfo.carcinogenicity_studies" :key="index">
										<td>{{item.species||'Not available'}}</td>
										<td>{{item.route||'Not available'}}</td>
										<td>{{item.doses||'Not available'}}</td>
										<td>{{item.duratioin||'Not available'}}</td>
										<td>{{item.key_findings||'Not available'}}</td>
									</tr>
									
								</tbody>
							</table>
						</div>
					</div>
					<div class="dblock">
						<div id="p4" class="pos"></div>
						<div class="bt f24 font-m">Genotoxicity</div>
						<div class="btxt f16">
							<table>
								<tbody>
									<tr>
										<th class="f18 font-m">Test/Assay </th>
										<th class="f18 font-m">Cell lines/Organism </th>
										<th class="f18 font-m">Concentration/Dose </th>
										<th class="f18 font-m">Findings </th>
										<th class="f18 font-m">Note </th>
									</tr>
									<tr v-for="(item,index) in dataInfo.genotoxicity_studies" :key="index">
										<td>{{item.test_assay||'Not available'}}</td>
										<td>{{item.cell_lines_organism||'Not available'}}</td>
										<td>{{item.concentration_dose||'Not available'}}</td>
										<td>{{item.findings||'Not available'}}</td>
										<td>{{item.note||'Not available'}}</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
					<div class="dblock">
						<div id="p5" class="pos"></div>
						<div class="bt f24 font-m">Reproductive and Developmental Toxicity</div>
						<div class="btxt f16">
							<table>
								<tbody>
									<tr>
										<th class="f18 font-m">Species</th>
										<th class="f18 font-m">Route </th>
										<th class="f18 font-m">Doses</th>
										<th class="f18 font-m">Duration </th>
										<th class="f18 font-m">Key Findings </th>
									</tr>
									<template v-for="(item,index) in dataInfo.reproductive_and_developmental_studies" :key="index">
										<tr>
											<td class="f18 font-m" colspan="5"
												style="background: #f5f5f5;text-align: center;color: #242424;padding: 10px;">
												{{ item.title }}
											</td>
										</tr>
										
										<tr>
											<td>{{item.species||'Not available'}}</td>
											<td>{{item.route||'Not available'}}</td>
											<td>{{item.doses||'Not available'}}</td>
											<td>{{item.duratioin||'Not available'}}</td>
											<td>{{item.key_findings||'Not available'}}</td>
										</tr>
									</template>
								</tbody>
							</table>
							<br>
							<p v-if="dataInfo.PregnancyCategory&&dataInfo.PregnancyCategory=='A'"><b>*Pregnancy Category A:</b> Adequate and well-controlled studies show no risk to the fetus in the first trimester or later.</p>
							<p v-if="dataInfo.PregnancyCategory&&dataInfo.PregnancyCategory=='B'"><b>*Pregnancy Category B:</b> Animal studies show no risk, but there are no adequate human studies.</p>
							<p v-if="dataInfo.PregnancyCategory&&dataInfo.PregnancyCategory=='C'"><b>*Pregnancy Category C:</b> Animal studies show adverse effects, and there are no adequate human studies; potential benefits may warrant use despite risks.</p>
							<p v-if="dataInfo.PregnancyCategory&&dataInfo.PregnancyCategory=='D'"><b>*Pregnancy Category D:</b> Evidence of human fetal risk exists, but potential benefits may warrant use despite risks.</p>
							<p v-if="dataInfo.PregnancyCategory&&dataInfo.PregnancyCategory=='X'"><b>*Pregnancy Category X:</b> Studies show fetal abnormalities, and the risks clearly outweigh potential benefits.</p>
						</div>
					</div>
					<div class="dblock">
						<div id="p6" class="pos"></div>
						<div class="bt f24 font-m">Local lrritation and Sensitization Potential </div>
						<div class="btxt f16" v-html="otherInfo.local_irritation_and_sensitization_potential||'Not available'"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="detailBox gray" v-if="false">
			<div class="box flex page-inner">
				<div class="col"></div>
				<div class="cor">
					<div class="dt f36 font-m">Clinical Toxicity Data</div>
					<!-- <div class="dblock">
						<div id="p7" class="pos"></div>
						<div class="bt f24 font-m">Pharmacodynamics data</div>
						<div class="btxt f16" v-html="otherInfo.pharmacodynamics_data"></div>
					</div> -->
					<div class="dblock">
						<div id="p8" class="pos"></div>
						<div class="bt f24 font-m">Carcinogenicity </div>
						<div class="btxt f16" v-html="otherInfo.carcinogenicity||'Not available'">

						</div>
					</div>
					<div class="dblock">
						<div id="p9" class="pos"></div>
						<div class="bt f24 font-m">Reproductive and Developmental Toxicity </div>
						<div class="btxt f16" v-html="otherInfo.reproductive_and_developmental_toxicity||'Not available'"></div>
					</div>
					<div class="dblock">
						<div id="p10" class="pos"></div>
						<div class="bt f24 font-m">Local lrritation and Sensitization Potential </div>
						<div class="btxt f16" v-html="otherInfo.local_irritation_and_sensitization_potential||'Not available'"></div>
					</div>
					<div class="dblock">
						<div id="p11" class="pos"></div>
						<div class="bt f24 font-m">Genotoxicity</div>
						<div class="btxt f16" v-html="otherInfo.genotoxicity||'Not available'"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		toxicity,apiInfo
	} from '@/api/sections'

	import {
		ElMessageBox
	} from 'element-plus'
	export default {
		async setup() {
			const route = useRoute();
			const info = {
				name: 'Paracetamol (Oral)',
				IUPACName: ''
			};
			const state = useState('global_userInfo');
			return {
				info,
				state
			}
		},
		data() {
			return {
				dataInfo: {},
				ApiInfo:{},
				otherInfo:{},
				resAni:null
			}
		},
		methods: {
			hasPermision: function(id) {
				const that = this;
				return that.state.permission.includes(id) || false;
			},
			strickyUpdate(){
				var _h=$(".header").height();
				var _top=$(window).scrollTop();
				var _target=$('.mliks');
				var _offset=$('.offset').offset().top;
				if(_top>_offset-_h){
					_target.addClass('fixed');
					_target.css({
					top:_h
					})
				}else{
					_target.removeClass('fixed');
				};
				requestAnimationFrame(this.strickyUpdate);
			}
		},
		computed: {

		},
		mounted: function() {
			var that = this;
			that.$nextTick(function() {
				
				if (localStorage.getItem("userinfo")) {
					that.token = JSON.parse(localStorage.getItem("userinfo")).token;
				};
				apiInfo({
					'id': that.$route.query.id,
					token: that.token,
				}).then((res) => {
					that.ApiInfo=res.data
				})
				toxicity({
					'apiid': that.$route.query.id,
				}).then((res) => {
					that.dataInfo = res.data
					that.otherInfo= res.data.clinical_toxicity_data
					// if(res.data.toxicity_data && res.data.toxicity_data.length>0){
					// 	that.otherInfo=res.data.toxicity_data[0]
					// }
				})

				$(".toggleML").each(function() {
					var btn = $(this).find('.zk');
					var short = $(this).find('.span');
					var info = $(this).find('.hid');
					var line = $(this).find('.p');
					short.text(info.text().substr(0, 120) + '...');
					btn.click(function() {
						if ($(this).hasClass('act')) {
							$(this).removeClass('act');
							line.removeClass('act');
							short.text(info.text().substr(0, 120) + '...');
						} else {
							$(this).addClass('act');
							line.addClass('act');
							short.html(info.html());
						}
					});
				});
				if(!this.resAni){
					cancelAnimationFrame(this.resAni);
					this.strickyUpdate();
				}
			})
		}
	}
</script>